<template>
	<div class="flex flex-wrap gap-4 mb-4">
		<div class="w-[170px] bg-bg-1">
			<div>BaseLoading</div>
			<BaseLoading />
		</div>
		<div class="w-[170px] bg-bg-1">
			<div>BaseLoadingBigIcon</div>
			<BaseLoadingBigIcon />
		</div>
		<div class="w-[170px] bg-bg-1">
			<div>BaseLoadingBox</div>
			<BaseLoadingBox loading isEmpty class="h-[150px]" />
		</div>
		<div class="w-[170px] bg-bg-1">
			<div>BaseLoadingCircle</div>
			<BaseLoadingCircle />
		</div>
		<div class="w-[170px] bg-bg-1">
			<div>BaseLoadingIcon</div>
			<BaseLoadingIcon />
		</div>
		<div class="w-[170px] bg-bg-1">
			<div>BaseLoadingSmallIcon</div>
			<BaseLoadingSmallIcon />
		</div>
	</div>
</template>

<script setup lang="ts">
import {
	BaseLoading,
	BaseLoadingBigIcon,
	BaseLoadingBox,
	BaseLoadingCircle,
	BaseLoadingIcon,
	BaseLoadingSmallIcon
} from '@/components/base'
</script>

<style scoped></style>
